<template>
  <div>
    <my-div class="exchange">
     <head></head>
      <my-div class="transfer-choose">
        <my-text text="安全中心" day_color="rgba(70,120,245,1)" night_color="rgba(184,111,36,1)"  class="transfer-title"></my-text>
        <div class="safe-range">
          <text style="font-size:'28px';color:rgba(60,71,98,1);">安全级别</text>
          <text style="font-size:'24px';color:rgba(88,184,69,1);margin-left:16px;">{{safe_range}}</text>
        </div>
        <wxc-progress :value='safe_progress' bar-color='rgba(88,184,69,1)' :bar-height=10 :bar-width=690></wxc-progress>
        <div class="choose-currency" style="margin-top:60px;">
          <text class="currency-name">邮箱</text>
          <div class="currency-wrapper" @click="set_email">
             <text class="currency-value">{{email}}</text>
            <image style="width:18px;height:32px;margin-left:24px;" src="root:img/home/right@2x.png"></image>
          </div>
        </div>
         <div class="choose-currency">
          <text class="currency-name">资金密码</text>
          <div class="currency-wrapper" @click="push('root:pages/my/update_funds.js')">
             <text class="currency-value">{{funds_pw}}</text>
            <image style="width:18px;height:32px;margin-left:24px;" src="root:img/home/right@2x.png"></image>
          </div>
        </div>
         <div class="choose-currency">
          <text class="currency-name">指纹登录</text>
          <div class="currency-wrapper">
             <!-- <text class="currency-value">{{current_wallet.account_id}}</text> -->
            <image style="width:18px;height:32px;margin-left:24px;" src="root:img/home/right@2x.png"></image>
          </div>
        </div>
        <div class="choose-currency">
          <text class="currency-name">人脸识别</text>
          <div class="currency-wrapper">
             <!-- <my-switch></my-switch>   -->
            <image style="width:18px;height:32px;margin-left:24px;" src="root:img/home/right@2x.png"></image>
          </div>
        </div>
      </my-div>
      <alert-input ref='valid_mail' :validate="valid_email" type="email" title="验证邮箱" placeholder="请输入邮箱号码" @success="success"></alert-input> 
    </my-div>
  </div> 
</template>

<script>
import { WxcButton ,WxcProgress} from 'weex-ui'
import MySwitch from '../../component/my-switch.vue';
import AlertInput from '../../component/alert_input.vue'
export default {
  name: '',
  data() {
    return {
      funds_pw:'',
      email:'',
      safe_progress:0,
    }
  },
  components: {WxcButton,WxcProgress,MySwitch,AlertInput},
  created() {
    const notify=weex.requireModule("notify")
    notify.regist("funds_pw", (data)=> {
        this.safe_progress +=25
        this.funds_pw = '已完成'
    });
  },
  computed: {
    safe_range(){
      const ranges = {
        '0':'弱',
        '25':'低',
        '50':'中',
        '75':'高',
        '100':'极高',
      }
      return ranges[this.safe_progress+'']
    }
  },
  methods: {
    onLoad(){
      if(this.current_user.funds_pw) this.safe_progress += 25
      if(this.current_user.email) this.safe_progress += 25
      // if(this.funds_pw) this.safe_progress += 25
      // if(this.funds_pw) this.safe_progress += 25
      this.funds_pw = this.current_user.funds_pw ? '已完成' : '点击设置'
      this.email = this.current_user.email ? '已完成' : '点击设置'
      
    },
    set_email(){
      this.$refs.valid_mail.show = true
    },
    valid_email(val){
      if(!val) return this.toast('请输入邮箱')
      const reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$")
      if(reg.test(val)){
        return true
      }else {
        return this.toast('请输入正确的邮箱格式')
      }
    },
    success(val){
      const param = {
        account_id:this.current_wallet.account_id,
        username:this.current_user.name,
        email:val,
      }
      this.$http.post('index/saveSendEmail',param,(res)=>{
        const notify=weex.requireModule("notify")
        this.toast('AXSwap已发送邮件至您的邮箱，请确认查收！')
         notify.send('set_email',val)
        this.current_user.email = val
        this.email = '已完成'
        this.set_current_user(this.current_user)
        this.safe_progress +=25
      })
    }
  }
}
</script>
<style scoped>
.wrapper{
  display: flex;
  flex-direction: row;
}
.exchange{
  flex: 1;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
.sure-btn{
  position: absolute;
  bottom: 30px;
  left: 30px;
}
.transfer-choose{
  width: 720px;
  padding-left: 30px;
}
.transfer-title{
  margin-top: 24px;
  font-size: 48px;
  font-family: PingFang SC;

  margin-bottom: 104px;
}
.choose-currency{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 690px;
  height: 100px;
}
.currency-value{
  font-size: 28px;
  max-width: 200px;
  lines:1;
  color: rgba(70,120,245,1);
}
.currency-name{
  font-size: 30px;
  color: rgba(60,71,98,1);
}
.currency-wrapper{
  display: flex;
  flex-direction: row;
  height: 100px;
  align-items: center;
}
.safe-range{
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}
</style>
